<template>
	<image src="/static/index/top_bg.png" mode="widthFix" class="top_bg"></image>
	<!-- #ifdef MP-WEIXIN -->
	<view class="search_box"
		:style="{'margin-top':`calc(${menuButtonInfo.top}px - (80rpx - ${menuButtonInfo.height}px)/2)`,'width':`calc(${menuButtonInfo.left}px - 2 * (100% - ${menuButtonInfo.right}px))`,'margin-left':`calc(100% - ${menuButtonInfo.right}px)`}">
		<!-- <view class="msg_box">
			<image src="/static/icon/msg.png"></image>
			<view>8</view>
		</view> -->
		<navigator class="input_box" url="/pages/search/search">
			<image src="/static/icon/magnifier.png" class="magnifier"></image>
			<view class="input" style="color: #90A1B9;">微信立减金</view>
		</navigator>
	</view>
	<!-- #endif -->
	<!-- #ifndef MP-WEIXIN -->
	<view class="search_box" style="margin-left: 36rpx;margin-right: 36rpx;width: 678rpx;padding-top: 30rpx;">
		<!-- <view class="msg_box">
			<image src="/static/icon/msg.png"></image>
			<view>8</view>
		</view> -->
		<navigator class="input_box" url="/pages/search/search">

			<image src="/static/icon/magnifier.png" class="magnifier"></image>
			<view class="input" style="color: #90A1B9;">微信立减金</view>
		</navigator>
	</view>
	<!-- #endif -->
	<view class="box1">
		<view style="height: 100rpx;width: 100%;display: flex;align-items: center;justify-content: center;">
			<view
				style="height: 100%;background-color: #ffffff;border-radius: 30rpx 30rpx 0 0;flex: 1;display: flex;align-items: center;justify-content: flex-start;">
				<image src="/static/index/box1.png" style="width: 412rpx;margin-left: 36rpx;" mode="widthFix"></image>
			</view>
			<navigator url="/pages/category/category" style="width: 280rpx;height: 100%;background-color: #ffffff;">
				<view
					style="height: 100%;width: 100%;background-color: #f7f9fb;border-bottom-left-radius: 30rpx;display: flex;align-items: center;justify-content: center;">
					<text style="font-size: 32rpx;font-weight: bold;">200+</text>
					<text style="font-size: 24rpx;color: #62748E;margin-left: 10rpx;">更多品类回收</text>
				</view>
			</navigator>
		</view>
		<view class="menu_box1">
			<view style="width: 100%;height: auto;display: flex;align-items: center;justify-content: space-between;">
				<navigator :url="'/pages/category/category?info='+JSON.stringify(item)"
					v-for="item in indexInfo?.homePageConfig?.home_1" :key="item.id">
					<image :src="item.imgUrl" lazy-load />
					<view class="t">{{item.name}}</view>
					<view class="sub_t">{{item.label}}</view>
				</navigator>
			</view>
			<view
				style="width: 100%;height: auto;display: flex;align-items: center;justify-content: space-between;margin-top: 36rpx;">
				<navigator :url="'/pages/category/category?menu='+item.name"
					v-for="item in indexInfo?.homePageConfig?.home_2" :key="item.id">
					<image :src="item.imgUrl" lazy-load />
					<view class="t">{{item.name}}</view>
				</navigator>
			</view>
		</view>
	</view>
	<view class="box2">
		<image src="/static/index/box2.png" mode="widthFix"
			style="width: 100%;position: absolute;z-index: -1;top: 0;left: 0;"></image>
		<view class="top_box2">
			<image src="/static/index/box2_2.png" mode="widthFix" style="width: 180rpx;margin-bottom: 20rpx;"></image>
			<image src="/static/index/box2_3.png" mode="widthFix" style="width: 224rpx;"></image>
			<view class="box2_menu">
				<view @click="box2MenuIndex=0" :class="[box2MenuIndex==0?'active':'']">成交多</view>
				<view @click="box2MenuIndex=1" :class="[box2MenuIndex==1?'active':'']">折扣高</view>
				<view @click="box2MenuIndex=2" :class="[box2MenuIndex==2?'active':'']">我的常用</view>
			</view>
		</view>
		<swiper :current="box2MenuIndex" @change="this.box2MenuIndex=$event.detail.current" adjust-height="none"
			style="width: 100%;height: 440rpx;">
			<swiper-item>
				<navigator class="ii" :url="'/pages/category/category?info='+JSON.stringify(item)"
					v-for="item in indexInfo?.homePageConfig?.home_3" :key="item.id">
					<image :src="item.imgUrl" lazy-load></image>
					<view class="right_box">
						<view class="title">{{item.name}}</view>
						<view class="bottom_box2">
							<view class="i1">已成交<view style="margin-left: 10rpx;">{{item.label}}</view>
							</view>
							<view class="i2"
								style="background: linear-gradient(90deg, rgba(255, 223, 32, 0.1) 0%, rgba(0, 201, 80, 0) 100%);">
								<image src="/static/icon/xingxing.png" lazy-load></image>
								<text>最近1小时内成交 <text>{{item.actualNum}}</text>
									单</text>
							</view>
						</view>
					</view>
				</navigator>
			</swiper-item>
			<swiper-item>
				<navigator class="ii" :url="'/pages/category/category?info='+JSON.stringify(item)"
					v-for="(item,index) in indexInfo?.homePageConfig?.home_4" :key="item.id">
					<image :src="item.imgUrl" lazy-load></image>
					<view class="right_box">
						<view class="title">{{item.name}}</view>
						<view class="bottom_box2">
							<view class="i1">
								<view style="margin-right: 10rpx;">{{item.label}}</view>回收
							</view>
							<view class="i2"
								style="background: linear-gradient(90deg, rgba(142, 81, 255, 0.1) 0%, rgba(255, 223, 32, 0) 100%);">
								<image src="/static/icon/zuanshi.png" lazy-load></image>
								<text>性价比指数：<text>{{item.num || (index==0?100:(index==1?98:95))}}</text></text>
							</view>
						</view>
					</view>
				</navigator>
			</swiper-item>
			<swiper-item>
				<view v-if="!usualOrder && !maxOrder"
					style="width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;flex-direction: column;">
					<image src="/static/icon/none.png" style="height: 130rpx;width: 130rpx;margin-bottom: 20rpx;" />
					<view style="font-size: 28rpx;color: #62748E;height: 35rpx;line-height: 35rpx;">当前还没有回收订单</view>
					<navigator url="/pages/category/category" class="ii"
						style="background-color: #FFDF20;height: 80rpx;width: 240rpx;justify-content: center;font-size: 28rpx;padding: 0;border-radius: 20rpx;margin-top: 40rpx;">
						<image src="/static/icon/jiahao_cu.png"
							style="height: 32rpx;width: 32rpx;margin-right: 10rpx;" />我要卖卡
					</navigator>
				</view>
				<template v-else>
					<view class="ii" v-if="usualOrder">
						<image :src="usualOrder.productUrl" lazy-load></image>
						<view class="right_box">
							<view class="title">{{usualOrder.productName}}</view>
							<view class="bottom_box2">
								<view class="i1" style="width: 100%;">最近成交</view>
							</view>
						</view>
						<navigator v-if="usualOrder.faceValueId"
							:url="'/pages/sell/sell?faceValueId='+usualOrder.faceValueId"
							style="background-color: #FFDF20 ;width: 185rpx;height: 60rpx;border-radius: 20rpx;font-size: 24rpx;display: flex;align-items: center;justify-content: center;color: #020618;">
							<image src="/static/icon/jiahao.png"
								style="height: 24rpx;width: 24rpx;margin-right: 5rpx;" />
							再来一单
						</navigator>
						<view v-else @click="xiajia"
							style="background-color: #FFDF20 ;width: 185rpx;height: 60rpx;border-radius: 20rpx;font-size: 24rpx;display: flex;align-items: center;justify-content: center;color: #020618;">
							<image src="/static/icon/jiahao.png"
								style="height: 24rpx;width: 24rpx;margin-right: 5rpx;" />
							再来一单
						</view>
					</view>
					<view class="ii" v-if="maxOrder">
						<image :src="usualOrder.productUrl" lazy-load></image>
						<view class="right_box">
							<view class="title">{{maxOrder.productName}}</view>
							<view class="bottom_box2">
								<view class="i1" style="width: 100%;">已成交{{maxOrder.orderCount}}单 经常使用</view>
							</view>
						</view>
						<navigator v-if="maxOrder.faceValueId"
							:url="'/pages/sell/sell?faceValueId='+maxOrder.faceValueId"
							style="background-color: #FFDF20 ;width: 185rpx;height: 60rpx;border-radius: 20rpx;font-size: 24rpx;display: flex;align-items: center;justify-content: center;color: #020618;">
							<image src="/static/icon/jiahao.png"
								style="height: 24rpx;width: 24rpx;margin-right: 5rpx;" />
							再来一单
						</navigator>
						<view v-else @click="xiajia"
							style="background-color: #FFDF20 ;width: 185rpx;height: 60rpx;border-radius: 20rpx;font-size: 24rpx;display: flex;align-items: center;justify-content: center;color: #020618;">
							<image src="/static/icon/jiahao.png"
								style="height: 24rpx;width: 24rpx;margin-right: 5rpx;" />
							再来一单
						</view>
					</view>
					<navigator class="ii" url="/pages/order_page/order_page"
						style="color: #62748E;font-size: 24rpx;justify-content: center;">
						查看全部订单
						<image src="/static/icon/jiantou_2.png" style="margin: 0;height: 32rpx;width: 32rpx;" />
					</navigator>
				</template>
			</swiper-item>
		</swiper>
	</view>
	<view style="
		background: linear-gradient(180deg, #FFFFFF 0%, #F1F5F9 100%);">
		<image src="/static/index/box3.png" mode="widthFix" style="width: 306rpx;margin: 30rpx 36rpx;"></image>
		<view class="box3">
			<navigator v-for="item in indexInfo?.homePageConfig?.home_5" :key="item.id"
				:url="'/pages/category/category?info='+JSON.stringify(item)">
				<image :src="item.imgUrl" lazy-load mode="widthFix"></image>
				<view class="t">{{item.name}}</view>
				<view class="st">
					<text>{{item.label}}</text>
					<text>{{item.discount}}</text>
				</view>
			</navigator>
		</view>
	</view>
	<!-- #ifdef MP-WEIXIN -->
	<view class="box4">
		<view style="height: 90rpx;width: 100%;display: flex;align-items: center;justify-content: space-between;">
			<image src="/static/icon/avatar1.png" style="width: 90rpx;height: 90rpx;margin-right: 20rpx;"></image>
			<view
				style="flex: 1;height: 100%;display: flex;flex-direction: column;align-items: flex-start;justify-content: space-between;">
				<view style="height: 40rpx;line-height: 40rpx;color: #020618;font-size: 30rpx;">小优 专属顾问</view>
				<view style="height: 35rpx;line-height: 35rpx;color: #62748E;font-size: 24rpx;">专业在线1V1帮您解决疑问</view>
			</view>
			<view @click="customerService"
				style="height: 80rpx;width: 200rpx;border-radius: 40rpx;background-color: #F8FAFC;color: #020618;font-size: 28rpx;display: flex;align-items: center;justify-content: center;">
				<image src="/static/icon/wx.png" style="margin-right: 10rpx;width: 40rpx;" mode="widthFix"></image>添加微信
			</view>
		</view>
		<image src="https://cdn.meijingnet.cn/huishou/static/img/card_2.png" mode="widthFix"
			style="width: 100%;margin-top: 30rpx;"></image>
	</view>
	<!-- #endif -->

	<image src="https://cdn.meijingnet.cn/huishou/static/img/card_1.png" mode="widthFix"
		style="margin: 36rpx 36rpx 0 36rpx;width: 678rpx;"></image>
	<view class="box5">
		<image src="/static/index/changjianwenti.png" mode="widthFix" style="width: 130rpx;" />
		<template v-for="(item,index) in wentiList" :key="index">
			<view class="wenti" @click="openHelp(index)">
				<image src="/static/index/wen.png" mode="widthFix" />
				<view>{{item.wenti}}</view>
				<image src="/static/icon/jiantou.png" :style="{'transform': `rotate(${item.open?180:0}deg)`}" />
			</view>
			<view class="daan" v-if="item.open">{{item.daan}}</view>
		</template>
		<navigator url="/pages/help_center/help_center"
			style="background-color: #F8FAFC;width: 100%;height: 70rpx;border-radius: 35rpx;display: flex;align-items: center;justify-content: center;color: #62748E;font-size: 24rpx;margin-top: 40rpx;">
			查看更多问题
			<image src="/static/icon/jiantou_2.png" mode="widthFix" style="margin-left: 10rpx;width: 36rpx;" />
		</navigator>
	</view>
	<view style="display: flex;align-items: center;justify-content: space-between;height: auto;margin: 0 36rpx;">
		<image src="/static/index/yonghupingjia.png" mode="widthFix" style="width: 130rpx;"></image>
		<view style="display: flex;align-items: center;justify-content: flex-end;color: #62748E;font-size: 24rpx;"
			@click="openPopup">
			查看更多
			<image src="/static/icon/to_right.png" style="height: 32rpx;width: 32rpx;margin-left: 10rpx;" />
		</view>
	</view>
	<view class="comment_box" v-if="commentList.length>0"
		:style="{'height':`calc(72rpx + ${commentList[currentCommentIndex].height}px + ${commentList[currentCommentIndex+1].height}px)`}">
		<view :style="{'top':commentTop+'px','transition':transition+'s'}">
			<view class="box6" v-for="(item,index) in commentList" :key="item.id" :id="'c'+item.id"
				style="margin-top: 18rpx;">
				<view class="top">
					<image :src="item.memberAvatar" lazy-load />
					<view class="right_box">
						<view class="name">
							<text>{{item.memberName}}</text>
							<!-- <text>湖南</text> -->
						</view>
						<view class="txt">
							<text>通过卡券回收赚了</text><text>¥ {{item.amt}}</text>
						</view>
					</view>
				</view>
				<view class="mid">{{item.content}}</view>
				<view class="bottom" v-if="item?.labelList?.length>0">
					<view v-for="label in item.labelList" :key="label">{{label}}</view>
				</view>
			</view>
		</view>
	</view>
	<uni-popup ref="popup" type="bottom" border-radius="30rpx 30rpx 0 0" background-color="#fff" safe-area>
		<view
			style="display: flex;align-items: center;justify-content: space-between;height: 112rpx;width: 100%;padding: 36rpx;box-sizing: border-box;">
			<image src="/static/index/yonghupingjia.png" mode="heightFix" style="height: 40rpx;"></image>
			<image src="/static/icon/close.png" style="height: 40rpx;width: 40rpx;" @click="this.$refs.popup.close()">
			</image>
		</view>
		<scroll-view style="width: 100%;height: 60vh;" direction="vertical" scroll-y>
			<template v-for="(item,index) in commentList" :key="item.id">
				<view class="box6" v-if="index < commentList.length-2" style="background-color: #F8FAFC;">
					<view class="top">
						<image :src="item.memberAvatar" lazy-load />
						<view class="right_box">
							<view class="name">
								<text>{{item.memberName}}</text>
								<!-- <text>湖南</text> -->
							</view>
							<view class="txt">
								<text>通过卡券回收赚了</text><text>¥ {{item.amt}}</text>
							</view>
						</view>
					</view>
					<view class="mid">{{item.content}}</view>
					<view class="bottom" v-if="item?.labelList?.length>0">
						<view v-for="label in item.labelList" :key="label">{{label}}</view>
					</view>
				</view>
			</template>
		</scroll-view>
	</uni-popup>
	<view style="height: 150rpx;width: 100%;" class="safe"></view>
	<view class="safe"
		style="position: fixed;bottom: 0;left: 0;height: 110rpx;width: 750rpx;background-color: #ffffff;display: flex;align-items: center;justify-content: space-between;font-size: 20rpx;">
		<view
			style="height: 100%;flex: 1;display: flex;flex-direction: column;align-items: center;justify-content: center;">
			<image src="/static/tab/index_in.png" style="width: 60rpx;height: 60rpx;margin-bottom: 6rpx;" />首页
		</view>
		<navigator style="width: 280rpx;position: relative;height: 100%;" url="/pages/category/category">
			<image src="/static/tab/sell.png" mode="widthFix"
				style="width: 280rpx;height: auto;position: absolute;left: 0;top: -20rpx;"></image>
		</navigator>
		<navigator url="/pages/mine/mine" open-type="redirect"
			style="height: 100%;flex: 1;display: flex;flex-direction: column;align-items: center;justify-content: center;color: #62748E;">
			<image src="/static/tab/mine_out.png" style="width: 60rpx;height: 60rpx;margin-bottom: 6rpx;" />我的
		</navigator>
	</view>
	<view class="mask" v-if="showMingpian" @click="showMingpian=false">
	</view>
	<view class="mingpian_box" :style="{'bottom':showMingpian?0:'-700rpx'}">
		<view
			style="display: flex;align-items: center;justify-content: flex-end;height: 112rpx;width: 100%;padding: 36rpx;box-sizing: border-box;">
			<image src="/static/icon/close.png" style="height: 40rpx;width: 40rpx;" @click="showMingpian=false">
			</image>
		</view>
		<view style="font-size: 35rpx;font-weight: bold;height: 60rpx;line-height: 60rpx;">卡券回收有疑问？</view>
		<view
			style="font-size: 28rpx;font-weight: bold;height: 60rpx;line-height: 60rpx;color: #777777;margin: 20rpx 0 40rpx 0;">
			长按识别二维码，添加专属顾问</view>
		<image src="https://cdn.meijingnet.cn/huishou/static/img/customer_service.png" show-menu-by-longpress
			mode="heightFix" style="height: 300rpx;" lazy-load />
	</view>

	<!-- #ifdef MP-ALIPAY -->
	<contact-button tnt-inst-id="WSS_OvWE" scene="SCE00308723" size="100rpx" />
	<!-- #endif -->
</template>

<script>
	import api from '@/utils/api.js';
	export default {
		data() {
			return {
				menuButtonInfo: {},
				indexInfo: null,

				box2MenuIndex: 0,
				commentList: [],
				currentCommentIndex: 0,
				commentTop: 0,
				transition: 1,
				interval: null,

				wentiList: [{
					open: false,
					wenti: '如何使用卡券回收功能？',
					daan: '在首页选择您要回收的卡券类型 -> 按要求输入卡号和卡密 -> 系统评估并显示回收价格 -> 确认无误后提交回收申请 -> 等待验证 -> 验证通过后金额将存入您的App钱包中。'
				}, {
					open: false,
					wenti: '如何保证给我的价格是最高的？',
					daan: '平台实时对接多个服务商价格数据，智能比价系统即时获取市场最优价格。'
				}, {
					open: false,
					wenti: '提交回收申请后，审核需要多久？',
					daan: '审核时间通常在提交后的几分钟到几小时内完成。您可以在“我的订单”中查看验证状态。'
				}],
				usualOrder: null,
				maxOrder: null,
				showMingpian: false,
			}
		},
		async onLoad() {
			this.menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			let indexInfo = await getApp().getIndexInfo();
			this.indexInfo = indexInfo;

			let commentList = await getApp().getCommonList();
			commentList = JSON.parse(JSON.stringify(commentList))
			let a = JSON.parse(JSON.stringify(commentList[0]))
			a.id = a.id + 'a';
			commentList.push(a);
			let b = JSON.parse(JSON.stringify(commentList[1]))
			b.id = b.id + 'b';
			commentList.push(b);
			this.commentList = commentList;
			this.$nextTick(() => {
				for (let i of commentList) {
					this.getHeight(i.id);
				}
				let margin = uni.upx2px(36);
				this.interval = setInterval(() => {
					let commentList = this.commentList;
					let currentCommentIndex = this.currentCommentIndex;
					let height = commentList[currentCommentIndex].height;
					this.commentTop -= (height + margin);
					this.currentCommentIndex += 1;

					if (this.currentCommentIndex == commentList.length - 2) {
						setTimeout(() => {
							this.transition = 0;
							this.commentTop = 0;
							this.currentCommentIndex = 0;
							setTimeout(() => {
								this.transition = 1;
							}, 1000)
						}, 1000)
					}
				}, 3000);
			})
		},
		async onShow() {
			let {
				result: memberInfo = null
			} = await api.member_info();
			if (memberInfo) {
				let {
					result = []
				} = await api.order_usual();
				if (result.length > 0) {
					let usualOrder = result[0]?.usualOrder || null;
					let maxOrder = result[1]?.maxOrder || null;
					if (usualOrder && usualOrder.id) {
						this.usualOrder = usualOrder;
					} else {
						this.usualOrder = null;
					}
					if (maxOrder && maxOrder.id && (!usualOrder.id || maxOrder.id != usualOrder.id)) {
						this.maxOrder = maxOrder;
					} else {
						this.maxOrder = null;
					}
				}
			} else {
				this.usualOrder = null;
				this.maxOrder = null;
			}
		},
		onUnload() {
			clearInterval(this.interval);
		},
		onShareAppMessage() {

		},
		methods: {
			customerService() {
				getApp().customerService(this);
			},
			openPopup() {
				this.$refs.popup.open('bottom');
			},
			async getHeight(id) {
				let that = this;
				// 假设我们要通过ID获取组件高度
				let query; // 注意.in(this)用于指定查询的页面范围，this为当前组件实例
				// #ifdef MP-ALIPAY
				query = uni.createSelectorQuery(); // 注意.in(this)用于指定查询的页面范围，this为当前组件实例
				// #endif
				// #ifndef MP-ALIPAY
				query = uni.createSelectorQuery().in(this); // 注意.in(this)用于指定查询的页面范围，this为当前组件实例
				// #endif
				query.select('#c' + id).boundingClientRect(function(rect) {
					// rect是一个对象，包含了节点的布局位置信息
					// rect.height即为组件的高度
					for (let i of that.commentList) {
						if (i.id == id) {
							i.height = rect.height;
							break;
						}
					}
				}).exec();
			},
			openHelp(index) {
				let wentiList = this.wentiList;
				for (let i = 0; i < wentiList.length; i++) {
					if (i == index) {
						wentiList[i].open = !wentiList[i].open;
					} else {
						wentiList[i].open = false;
					}
				}
				this.wentiList = wentiList;
			},
			xiajia() {
				uni.showToast({
					title: '该卡种已下架',
					icon: 'error',
					duration: 1500
				})
			},
		}
	}
</script>

<style>
	@import url('@/css/search.css');

	.top_bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 750rpx;
		height: auto;
		z-index: -1;
	}

	.box1 {
		margin-top: 30rpx;
		width: 750rpx;
		height: auto;
		background-color: #f7f9fb;
		border-radius: 30rpx;
		overflow: hidden;
	}

	.box1 .menu_box1 {
		height: auto;
		background-color: #ffffff;
		border-radius: 0 30rpx 30rpx 30rpx;
		box-sizing: border-box;
		padding: 20rpx 36rpx 36rpx 36rpx;
		/* 		display: grid;
		grid-template-columns: repeat(5, 120rpx);
		justify-content: space-between;
		row-gap: 36rpx; */
	}

	.box1 .menu_box1 navigator {
		width: 120rpx;
		border-radius: 10rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		padding: 10rpx 0;
	}

	.box1 .menu_box1 navigator image {
		height: 96rpx;
		width: 96rpx;
		margin-bottom: 10rpx;
	}

	.box1 .menu_box1 navigator .t {
		height: 35rpx;
		line-height: 35rpx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
	}

	.box1 .menu_box1 navigator .sub_t {
		color: #62748E;
		font-size: 22rpx;
		height: 30rpx;
		line-height: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.box2 {
		background-color: #ffffff;
		width: 750rpx;
		height: auto;
		margin-top: 20rpx;
		border-radius: 30rpx 30rpx 0 0;
		padding: 0 36rpx;
		box-sizing: border-box;
		position: relative;
		z-index: 0;
	}

	.box2 .top_box2 {
		height: 154rpx;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		box-sizing: border-box;
		position: relative;
	}

	.box2 .top_box2 .box2_menu {
		width: 368rpx;
		height: 56rpx;

		background: #FFFFFF;
		box-shadow: 0px 30rpx 20rpx 0px rgba(255, 185, 0, 0.05), 0px 20rpx 20rpx 0px rgba(255, 185, 0, 0.05), 0px 10rpx 10rpx 0px rgba(255, 185, 0, 0.1);
		border-radius: 28rpx;
		position: absolute;
		right: 0;
		top: 36rpx;
		padding: 4rpx 6rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.box2 .top_box2 .box2_menu view {
		font-size: 24rpx;
		height: 48rpx;
		border-radius: 25rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #62748E;
		flex: 1;
	}

	.box2 .top_box2 .box2_menu .active {
		background-color: #FFDF20;
		color: #000000;
		font-weight: bold;
	}

	.box2 .ii {
		width: 100%;
		height: 100rpx;
		padding: 20rpx 0;
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}

	.box2 .ii image:first-child {
		height: 100rpx;
		width: 100rpx;
	}

	.box2 .ii .right_box {
		margin-left: 30rpx;
		height: 100%;
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: space-between;
	}

	.box2 .ii .right_box .title {
		font-size: 30rpx;
		height: 40rpx;
		line-height: 40rpx;
	}

	.box2 .ii .right_box .bottom_box2 {
		height: 40rpx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		font-size: 22rpx;
		color: #62748E;
	}

	.box2 .ii .right_box .bottom_box2 .i1 {
		width: 150rpx;
		height: auto;
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}

	.box2 .ii .right_box .bottom_box2 .i1 view {
		font-weight: bold;
		height: 40rpx;
		line-height: 40rpx;
		color: #000000;
		text-decoration: underline 6rpx #FFDF20;
		/* 防止下划线避开字母降部 */
		text-decoration-skip-ink: none;
		/* 微调下划线位置使其更贴近文字 */
		text-underline-offset: -6rpx;
	}

	.box2 .ii .right_box .bottom_box2 .i2 {
		padding: 0 20rpx;
		height: 40rpx;
		border-radius: 24rpx 0px 0px 24rpx;
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}

	.box2 .ii .right_box .bottom_box2 .i2 image {
		height: 32rpx;
		width: 32rpx;
		margin-right: 20rpx;
	}

	.box2 .ii .right_box .bottom_box2 .i2 text text {
		font-weight: bold;
		color: #000000;
	}

	.box3 {
		width: 678rpx;
		margin-left: 36rpx;
		display: grid;
		grid-template-columns: repeat(4, 160rpx);
		justify-content: space-between;
		row-gap: 36rpx;
	}

	.box3 navigator {
		height: auto;
		width: 160rpx;
	}

	.box3 navigator image {
		height: auto;
		width: 100%;
		margin-bottom: 20rpx;
	}

	.box3 navigator .t {
		height: 35rpx;
		width: 100%;
		line-height: 35rpx;
		font-size: 24rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		margin-bottom: 10rpx;
	}

	.box3 navigator .st {
		height: 35rpx;
		width: 100%;
		line-height: 35rpx;
		font-size: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #62748E;
	}

	.box3 navigator .st text:last-child {
		font-size: 28rpx;
		font-weight: bold;
		color: #000000;
		text-decoration: underline 6rpx #FFDF20;
		/* 防止下划线避开字母降部 */
		text-decoration-skip-ink: none;
		/* 微调下划线位置使其更贴近文字 */
		text-underline-offset: -6rpx;
	}

	.box4 {
		margin: 50rpx 36rpx 0 36rpx;
		width: 678rpx;
		height: auto;
		border-radius: 30rpx;
		background-color: #ffffff;
		padding: 36rpx;
		box-sizing: border-box;
	}

	.box5 {
		background-color: #ffffff;
		margin: 36rpx;
		padding: 36rpx;
		box-sizing: border-box;
		width: 678rpx;
		border-radius: 30rpx;
	}

	.box5 .wenti {
		height: auto;
		line-height: 40rpx;
		width: 100%;
		margin-top: 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.box5 .wenti image:first-child {
		width: 72rpx;
	}

	.box5 .wenti image:last-child {
		width: 40rpx;
		height: 40rpx;
	}

	.box5 .wenti view {
		flex: 1;
		height: 100%;
		font-size: 28rpx;
		color: #020618;
		margin: 0 10rpx;
	}

	.box5 .daan {
		margin-top: 20rpx;
		font-size: 28rpx;
		line-height: 35rpx;
		color: #62748E;
	}

	.box6 {
		box-sizing: border-box;
		padding: 36rpx;
		margin: 0 36rpx 36rpx 36rpx;
		background-color: #ffffff;
		border-radius: 30rpx;
	}

	.box6 .top {
		margin-bottom: 30rpx;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		height: 80rpx;
		width: 100%;
	}

	.box6 .top image {
		height: 80rpx;
		width: 80rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.box6 .top .right_box {
		flex: 1;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: space-between;
	}

	.box6 .top .right_box view {
		height: 35rpx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}

	.box6 .top .right_box .name text:first-child {
		color: #020618;
		font-size: 30rpx;
		margin-right: 20rpx;
	}

	.box6 .top .right_box .name text:last-child {
		color: #62748E;
		font-size: 24rpx;
	}

	.box6 .top .right_box .txt text:first-child {
		color: #62748E;
		font-size: 24rpx;
		margin-right: 10rpx;
	}

	.box6 .top .right_box .txt text:last-child {
		color: #FB2C36;
		font-weight: bold;
		font-size: 26rpx;
	}

	.box6 .mid {
		color: #62748E;
		font-size: 26rpx;
		line-height: 35rpx;
	}

	.box6 .bottom {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-start;
		width: 100%;
		margin-top: 30rpx;
		gap: 10rpx;
	}

	.box6 .bottom view {
		min-height: 40rpx;
		background-color: #F1F5F9;
		border-radius: 20rpx;
		padding: 0 20rpx;
		color: #020618;
		font-size: 22rpx;
		line-height: 40rpx;
	}

	.comment_box {
		width: 750rpx;
		overflow: hidden;
		position: relative;
		transition: 1s;
		margin-top: 18rpx;
	}

	.comment_box>view {
		height: auto;
		width: 100%;
		position: absolute;
		left: 0;
	}
</style>